<template>
    <v-app id="user-center">
        <component :is="currentComponent"></component>
    </v-app>
</template>

<script>
    import MyUpdateAvatar from "../components/user-center/MyUpdateAvatar";
    import MyUserInfo from "../components/user-center/MyUserInfo";
    import MyUpdateUsername from "../components/user-center/MyUpdateUsername";
    import MyUpdatePassword from "../components/user-center/MyUpdatePassword";
    import MyUpdateEmail from "../components/user-center/MyUpdateEmail";
    export default {
        name: "UserCenter",
        components: {MyUpdateAvatar, MyUserInfo, MyUpdateUsername, MyUpdatePassword, MyUpdateEmail},
        created() {
            this.getCurrentComponent();
        },
        data() {
            return {
                currentComponent: 'MyUserInfo'
            }
        },
        methods: {
            getCurrentComponent() {
                let param = this.$route.params.operation;
                switch (param) {
                    case 'profile':
                        this.currentComponent = 'MyUserInfo';
                        break;
                    case 'update-avatar':
                        this.currentComponent = 'MyUpdateAvatar';
                        break;
                    case 'update-username':
                        this.currentComponent = "MyUpdateUsername";
                        break;
                    case 'update-password':
                        this.currentComponent = "MyUpdatePassword";
                        break;
                    case 'update-email':
                        this.currentComponent = "MyUpdateEmail";
                        break;
                    default:
                        this.$router.push({name: 'error'})
                }

            }
        },
        watch: {
            $route() {
                this.getCurrentComponent();
            }
        }
    }
</script>

<style scoped>
    #user-center {
        background-color: #f3f5fb;
    }
</style>